/* eslint-disable vue/no-mutating-props */
<template>
  <el-tag
    v-for="(tag,index) in list"
    :key="tag.name"
    class="mx-1"
    closable
    :disable-transitions="false"
    @close="handleClose(tag,index)"
  >
    {{ tag.name }}
  </el-tag>
  <el-input
    v-if="inputVisible"
    ref="InputRef"
    v-model="inputValue"
    class="ml-1 w-20"
    size="small"
    @keyup.enter="handleInputConfirm"
    @blur="handleInputConfirm"
  />
  <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
    按钮+
  </el-button>
</template>

<script lang="ts" setup>
import { ref, nextTick, watch, defineEmits } from 'vue';
import type { ElInput } from 'element-plus';
const emit = defineEmits(['updateList']);
const props = defineProps({
  list: {
    type: Array,
    default: ()=>[]
  }
});
// console.log(props.list);
const inputValue = ref('');
const dynamicTags = ref([]);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();
const handleClose = (tag: string,index) => {
  // props.list = props.list.filter(item => item.id != tag.id);
  props.list.splice(index,1)
};

const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    props.list.push({ name: inputValue.value, id: Date.now() });
  }
  inputVisible.value = false;
  inputValue.value = '';
};
</script>
